<template>
  <div id="course_detail">
    <header1></header1>

    <div class="container layout layout-margin-top">
      <ol class="breadcrumb">
        <li>
          <router-link to="/course">全部课程</router-link>
        </li>

        <li>
          <a href="/courses/?tag=Linux">{{tag.name}}</a>
        </li>

        <li class="active">
          <a>{{course.title}}</a>
        </li>
      </ol>

      <div class="row">
        <div class="col-md-9 layout-body">
          <div class="side-image side-image-mobile">
            <img src />
          </div>
          <div class="content course-infobox">
            <div class="clearfix course-infobox-header">
              <h4 class="pull-left course-infobox-title">
                <span>{{course.title}}</span>
              </h4>
              <!-- <button @click="addcollect" v-if="collect==0">收藏</button>
              <button @click="addcollect" v-else>已收藏</button>-->
              <div
                class="pull-right course-infobox-follow"
                data-follow-url="/courses/1/follow"
                data-unfollow-url="/courses/1/unfollow"
              >
                <span class="course-infobox-followers">{{course.attention}}</span>
                <span>人关注</span>
                <i
                  class="fa"
                  data-next="/login?next=%2Fcourses%2F1"
                  @click="addcollect"
                  v-if="cfocus==1"
                >
                  <img
                    src=""
                    alt="关注"
                  />
                  <span></span>
                </i>
                <i class="fa" data-next="/login?next=%2Fcourses%2F1" @click="addcollect" v-else>
                  <img
                    src=""
                    alt="已关注"
                  />
                  <span></span>
                </i>
              </div>
            </div>
            <div class="clearfix course-infobox-body">
              <div class="course-infobox-content">
                <p>{{course.info}}</p>
              </div>

              <div class="course-infobox-progress" >
                <div class="course-progress-new" v-for="i in seclist" :key="i.id" :class="{'ddd':i['usc'] ==='10'}"></div>
                <!-- <div class="course-progress-new"></div> -->
              <span v-if="uscount">（{{uscount}}/{{secount}}）</span>

              </div>

              <div class="pull-right course-infobox-price"></div>
            </div>

            <div class="clearfix course-infobox-footer">
              <div class="pull-right course-infobox-learned">{{course.learn}} 人学过</div>
            </div>
          </div>
          <div class="content">
            <ul class="nav nav-tabs" role="tablist">
              <li role="presentation" class="active">
                <a href="#labs" aria-controls="labs" role="tab" data-toggle="tab">实验列表</a>
              </li>

              <li role="presentation">
                <a
                  href="#comments"
                  class="stat-event"
                  aria-controls="comments"
                  role="tab"
                  data-stat="course_comment"
                  data-toggle="tab"
                >课程评论({{commentcount}})</a>
              </li>
              <li role="presentation">
                <a
                  href="#reports"
                  class="stat-event"
                  data-stat="course_report"
                  aria-controls="reports"
                  role="tab"
                  data-toggle="tab"
                >实验报告({{countReport}}))</a>
              </li>
            </ul>
              <transition name="fade">
                <Loading v-if="isLoading" />
              </transition>
            <div class="tab-content">
              <!-- 章节 -->
              <div role="tabpanel" class="tab-pane active" id="labs">
                <div class="lab-item" v-for="(i,index) in sections" :key="i.id">
                  <div class="item-top flex space-between" @click="checkcourse(i.video,i.id)">
                    <div class="top-left flex vertical-center">
                      <span class="inline-block lab-icon">
                        <img
                          src=""
                          alt="lab-classic"
                        />
                      </span>
                      <span class="inline-block lab-index">第{{index+1}}章</span>
                      <span
                        :title="i.section"
                        class="inline-block lab-name color-text"
                      >{{i.section}}</span>
                    </div>
                    <!-- <div class="top-right flex vertical-center">
                      <a
                        href="javascript:;"
                        class="btn-action-join display-none font-14 vertical-middle"
                        data-v-c9e91a06
                        role="button"
                      >需加入课程后学习，点击加入</a>
                    </div>-->
                  </div>
                </div>
              </div>

              <!-- 评论 -->
              <div role="tabpanel" class="tab-pane course-comment" id="comments">
                <div class="comment-box">
                  <div class="comment-form" v-if="user_id==null">
                    <div class="comment-form-unlogin">
                      请
                      <a
                        href="#sign-modal"
                        data-toggle="modal"
                        data-sign="signin"
                        data-next="/courses/1"
                      >登录</a>后发表评论
                    </div>
                  </div>
                  <div comment-editor-outter data-v-e4591952 data-v-0cc06be9 v-else>
                    <textarea
                      id="course-comment-textarea"
                      placeholder="输入你想说的话"
                      v-model="content"
                      rows="4"
                      wrap="soft"
                      class="form-control"
                      style="resize:none;"
                      data-v-e4591952
                    ></textarea>
                    <div class="btn-actions text-right" data-v-e4591952>
                      <button class="active" style="background:#36d02f" @click="addcomment">发表</button>
                    </div>
                  </div>
                  <div class="comment-title">最新评论</div>
                  <div class="comment-list">
                    <comments
                      v-for="(i,index) in coummlist"
                      :synClass="i"
                      :key="index"
                      style="padding:10px 10px;"
                    ></comments>
                  </div>
                </div>
              </div>
              <!-- 实验报告 -->
              <div role="tabpanel" class="tab-pane" id="reports">
                <span class="lab-id active" data-lab-id="None" @click="allreport(0)">全部</span>

                <span
                  class="lab-id inline-block font-12"
                  v-for="(i,index) in sections"
                  @click="allreport(i.id)"
                  :key="i.id"
                >第{{index+1}}章&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <div class="report-owner">
                  <!-- <span class="owner-list-left" data-user-id @click='sendreport()'>发布实验报告</span> -->
                  <span class="owner-list active" data-user-id="None">所有报告</span>
                </div>
                <div class="row report-items">
                  <div data-v-e5ce999e data-v-099fb5d6>
                    <div
                      data-v-43ba9cb6
                      data-v-e5ce999e
                      class="report-item clearfix col-lg-4"
                      data-v-099fb5d6
                      v-for="(item,index) in report"
                      :key="index"
                    >
                      <router-link
                        :to="{path:'/baogao',query:{'sid':item.section_id,'course_id':course_id,'user_id':user_id,'section_id':item.id}}"
                        class="report-content"
                      >
                        <div data-v-43ba9cb6 class="report-item-course">
                          <!---->
                          {{item.report_title}}
                        </div>

                        <div data-v-43ba9cb6 class="report-item-lab">Linux 进程管理</div>
                        <div data-v-43ba9cb6 class="tags">
                          <span data-v-43ba9cb6 class="tag">Linux</span>
                        </div>
                        <div data-v-43ba9cb6 class="report-item-count">
                          <span data-v-43ba9cb6>{{item.link_num}}赞</span>
                          <div data-v-43ba9cb6 class="report-item-arrow">
                            <div data-v-43ba9cb6 class="report-item-arrow-line"></div>
                          </div>
                        </div>
                      </router-link>

                      <div data-v-43ba9cb6 class="row report-item-comment-row">
                        <div data-v-43ba9cb6 class="col-sm-8">
                          <div data-v-43ba9cb6 class="report-item-author">
                            <div data-v-43ba9cb6 class="report-item-avatar">
                              <a
                                data-v-43ba9cb6
                                href="/users/874635"
                                class="avatar"
                                target="_blank"
                              >
                                <img
                                  data-v-43ba9cb6
                                  src="https://dn-simplecloud.shiyanlou.com/gravatarLNB9P2K35E8W.jpg?imageView2/1/w/200/h/200"
                                  title="LOU3661306656"
                                />
                              </a>
                              <!---->
                            </div>
                            <div data-v-43ba9cb6 class="user-username">
                              <a
                                data-v-43ba9cb6
                                target="_blank"
                                href="/users/874635"
                                class="username"
                              >LOU3661306656</a>
                              <span data-v-43ba9cb6 class="user-level">L13</span>
                            </div>
                          </div>
                        </div>
                        <div data-v-43ba9cb6 class="report-item-comments-col col-sm-4">
                          <div data-v-43ba9cb6 class="pull-right report-item-comments">
                            <i data-v-43ba9cb6 class="fa fa-comments-o"></i>
                            {{item.report_browse}}
                          </div>
                        </div>
                      </div>

                      <div data-v-43ba9cb6 class="pull-right report-item-update">2018-11-22 17:35</div>
                    </div>
                  </div>
                </div>
                <div class="pagination-container"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3 layout-side">
          <div class="side-image side-image-pc">
            <img src />
          </div>

          <div class="sidebox mooc-teacher">
            <div class="sidebox-header mooc-header">
              <h4 class="sidebox-title">课程教师</h4>
              <button class="sidebox-titles" @click="addTeacher" v-if="focus==1">关注</button>
              <button class="sidebox-titles" @click="addTeacher" v-else>已关注</button>
            </div>
            <div class="sidebox-body mooc-content">
              <a href="/user/20406" target="_blank">
                <img :src="teacher.pic" />
              </a>
              <div class="mooc-info">
                <div class="name">
                  <strong>{{teacher.name}}</strong>
                </div>
                <div class="courses">
                  共发布过
                  <strong>{{course_num}}</strong>门课程
                </div>
              </div>
              <div class="mooc-extra-info">
                <div class="word long-paragraph">{{teacher.describe}}</div>
              </div>
            </div>
            <div class="sidebox-footer mooc-footer">
              <a href="/teacher/20406" target="_blank">查看老师的所有课程 ></a>
            </div>
          </div>

          <div class="side-image">
            <a href="/vip" target="_blank">
              <img src />
            </a>
          </div>
          <button
            @click="buynow"
            data-v-b530ced8
            type="button"
            class="btn btn-danger btn-join-course full-width color-fff"
          >立即购买</button>
          <div class="sidebox adv-course">
            <div class="sidebox-header">
              <h4 class="sidebox-title">进阶课程</h4>
            </div>
            <div class="sideobx-body course-content">
              <a href="/courses/204">实用Linux Shell编程</a>

              <a href="/courses/2">Vim编辑器</a>

              <a href="/courses/68">Linux命令实例练习</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 发布实验报告 -->
      <div class="modal" id="bootcamp-report-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog bootcamp-modal" role="document">
          <div class="modal-body">
            <editer v-on:listentochildevents="showMesfromchild"></editer>
          </div>
        </div>
      </div>
      <div class="modal fade" id="bootcamp-pay-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog bootcamp-modal" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">购买训练营</h4>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label>手机号</label>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="input-group">
                        <input type="text" name="phone_no" class="form-control" value />
                        <span class="input-group-btn">
                          <button
                            class="btn btn-primary get-phone-code"
                            type="button"
                            style="border-width:2px;"
                            data-code-url="/user/sms/code"
                            data-pay-url="/purchase/bootcamp/10/pay"
                          >获取验证码</button>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label>验证码</label>
                  <input type="text" class="form-control bootcamp-phone-code" />
                  <a class="label label-warning" href="/questions/2540" target="_blank">收不到验证码？</a>
                </div>

                <div class="form-group">
                  <label>支付方式</label>
                  <div class="pay-method-box">
                    <div class="pay-method pay-method-ali active" data-pay="ALI_WEB"></div>
                    <div class="pay-method pay-method-wx" data-pay="WX_NATIVE"></div>
                  </div>
                </div>
              </form>
            </div>
            <div class="modal-body vip-modal-qrcode" style="display:none;">
              <div class="vip-wx-price">
                付款：
                <span></span>
              </div>
              <div class="vip-wx-qrcode"></div>
              <a class="vip-wx-method" href="javascript:;">更换支付方式</a>
            </div>
            <div class="modal-footer">
              <span class="real-price pull-left">￥199.00</span>
              <span class="price-without-book pull-left" style="display:none;">￥199.00</span>
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary bootcamp-confirm-pay">确认购买</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 购买课程 -->
      <div class="modal fade" id="vip-modal" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">{{course.title}}</h4>
              <div class="alert-message">
                <div class="alert alert-danger"></div>
              </div>
            </div>
            <div class="modal-body">
              <div class="radio-group" @click="handle">
                <div class="vip-modal-item">
                  <div class="vip-modal-item-header">
                    <input type="radio" v-model="preferential_way" id="two" value="2" />
                    <label for="one">使用优惠卷</label>
                  </div>
                  <div class="vip-modal-item-body" v-show="preferential_way=='2'">
                    <select v-model="coupon" @change.stop="selectcoupon()">
                      <option disabled value>请选择</option>
                      <option :key="i.code" :value="i.code" v-for="i in mycoupon">{{i.name}}</option>
                    </select>
                  </div>
                </div>

                <div class="vip-modal-item">
                  <div class="vip-modal-item-header">
                    <input type="radio" v-model="preferential_way" id="one" value="1" />
                    <label for="two">使用积分</label>
                  </div>
                  <div class="vip-modal-item-body" v-show="preferential_way=='1'">
                    <div class="consume-beans">
                      <span>使用</span>
                      <input
                        class="form-control"
                        v-model="integral"
                        type="text"
                        value="0"
                        @blur.stop="checkintegral"
                      />
                      <span>个积分抵扣</span>
                      <span class="beans">{{saleprice}}</span>
                      <span>元</span>
                      <div class="left-beans">
                        <div>
                          您的积分还剩
                          <strong>{{leftintegral}}</strong>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="vip-modal-item">
                <div class="vip-modal-item-header">支付方式</div>
                <div class="vip-modal-item-body">
                  <div class="pay-method pay-method-ali active" data-pay="ALI_WEB"></div>
                  <div class="pay-method pay-method-wx" data-pay="WX_NATIVE"></div>
                </div>
              </div>
            </div>

            <div class="modal-footer">
              <div class="pull-left real-price">
                <div>
                  <div style="float:left">
                    <span>原价:</span>
                    <span :class="{'strong':this.level==='0'}">￥{{coursePirce.yuanjia}}</span>/
                    <span>普通会员:</span>
                    <span :class="{'strong':this.level==='1'}">￥{{coursePirce.pujia}}</span>/
                    <span>高级会员:</span>
                    <span :class="{'strong':this.level==='2'}">￥{{coursePirce.gaojia}}</span>
                    <br />
                    <span>付款：</span>
                    <strong>￥</strong>
                    <strong class="last-price">{{finprice}}</strong>
                  </div>
                  <br class="__web-inspector-hide-shortcut__" />
                </div>
              </div>
              <div class="pull-right pay-btn">
                <a class="btn btn-warning" @click="buycourse">确认购买</a>
                <input type="checkbox" checked />
                <span>
                  同意
                  <a href="/terms" target="_blank">会员服务条款</a>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade" id="paid-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" style="text-align:center;">支付确认</h4>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-6">
                  <button class="btn btn-primary paid-confirm" type="button">支付成功</button>
                </div>
                <div class="col-md-6">
                  <button
                    class="btn btn-primary paid-method"
                    type="button"
                    style="background:none; color:#0c9"
                  >选择支付方式</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer1></footer1>
  </div>
</template>

<script>
import header from "./header";
import footer from "./footer";
import comments from "./comments";
import editer from "./editer";
import Loading from "./Loading";
import {
  orderCourse,
  getCoupon,
  getuserinfo,
  showRule,
  showprice,
  buyCllass,
  getpayurl,
  
} from "../api/api.js";
export default {
  name: "course_detail",
  components: {
    header1: header,
    footer1: footer,
    comments: comments,
    editer: editer,
    Loading: Loading
  },
  data() {
    return {
      course: "",
      isLoading: true,
      tag: "",
      focus: 1,
      teacher: "",
      level: localStorage.getItem("level"),
      course_num: 0,
      sections: [],
      isTrue: 0,
      coupon: "",
      integral: "",
      totalintegral: 0,
      preferential_way: 0,
      course_id: this.$route.query.id,
      mycoupon: [],
      user_id: localStorage.getItem("user_id"),
      leftintegral: 0, //剩余积分
      ratio: "",
      saleprice: 0,
      totalprice: 3333, // 相应用户等级的价格
      coursePirce: {
        //该课程对应的三种价格
        yuanjia: "",
        pujia: "",
        gaojia: ""
      },
      isChecked: true, //选择那个优惠方式
      token: localStorage.getItem("token"),
      aa: false,
      content: "",
      report: "",
      coummlist: "",
      // conmmitdict: {},
      collect: 0,
      totalprices: 0,
      commentcount: 0,
      cfocus: 1,
      countReport: 0,
      seclist:'',
      secount:'',
      uscount:''

    };
  },
  mounted() {
    this.showcollect();
    this.allreport(0);
    this.axios({
      url:
        "/api/collect/?user_id=" +
        this.user_id +
        "&course_id=" +
        this.course_id,
      method: "get"
    }).then(res => {
      this.collect = res.data.collect;
      console.log(this.collect);
    });
    this.get_course_detail();
    this.showrule();
    this.getcomms();
    orderCourse({ user_id: this.user_id, course_id: this.course_id }).then(
      res => {
        if (res.status == 0) {
          this.isTrue = 0;
        } else {
          this.isTrue = 1;
        }
      }
    );
    this.coureport();
    this.axios({
      url: "/api/prsgresss/?cid=" + this.course_id + "&uid=" + this.user_id,
      method: "get"
    }).then(res => {
      this.seclist = res.data.seclist;
      this.secount = res.data.secount;
      this.uscount = res.data.uscount;
    });
  },
  computed: {
    finprice: function() {
      var total = this.totalprice - this.saleprice;
      return total;
    }
  },
  methods: {
    DFocus() {
      this.axios({
        url: "/api/DFocus/",
        method: "post",
        data: {
          course_id: this.course_id
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.cfocus = 1;
          alert("取消关注");
          this.get_course_detail();
        } else {
          this.cfocus = 0;
        }
      });
    },
    Focus() {
      this.axios({
        url: "/api/cFocus/",
        method: "post",
        data: {
          course_id: this.course_id
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.cfocus = 0;
          alert("关注成功");
          this.get_course_detail();
        } else {
          this.cfocus = 1;
        }
      });
    },
    //获取实验报告数量
    coureport: function() {
      this.axios
        .get("/api/countReport/?course_id=" + this.course_id)
        .then(res => {
          this.countReport = res.data.report;
        });
    },
    //接受子组件实验报告传过来的数据
    showMesfromchild(data) {
      console.log(data);
    },
    //发布实验报告</span>
    sendreport: function() {
      $("#bootcamp-report-modal").modal("show");
    },
    //添加收藏
    addcollect: function() {
      this.axios({
        url: "/api/collect/",
        method: "post",
        data: { user_id: this.user_id, course_id: this.course_id }
      }).then(res => {
        if (res.data.code == 200) {
          console.log(res);
          this.cfocus = res.data.collect;
          this.get_course_detail();
          alert("关注成功");
        } else {
          this.cfocus = res.data.collect;
          this.get_course_detail();
          alert("取消关注成功");
        }
      });
    },
    //关注老师
    addTeacher() {
      this.axios({
        url: "/api/userTeacher/",
        method: "post",
        data: {
          teacher: this.teacher.id,
          user: this.user_id
        }
      }).then(res => {
        alert(res.data.message);
        if (res.data.message == "取关成功") {
          this.focus = 1;
        } else {
          this.focus = 0;
        }
      });
    },
    //获取我的优惠卷
    getcoupon() {
      var params = {
        course_id: this.course_id,
        user_id: this.user_id
      };
      getCoupon(params).then(res => {
        this.mycoupon = res.user_coupon;
      });
    },
    //获取课程评论
    getcomms: function() {
      this.axios
        .get("/api/comment/?course_id=" + this.course_id, {})
        .then(res => {
          this.isLoading = false;
          this.coummlist = res.data.data;
          this.commentcount = res.data.count;
        });
    },

    //添加评论
    addcomment() {
      this.axios({
        url: "/api/comment/",
        method: "post",
        data: {
          user_id: this.user_id,
          course_id: this.course_id,
          content: this.content,
          pid: this.pid
        }
      }).then(res => {
        if (res.data.code == 200) {
          alert("评论成功");
          // this.$router.go(0);
          this.getcomms()
          
        }
      });
    },
    //实验报告
    allreport(sid) {
      this.axios({
        url: "/api/report/?course_id=" + this.course_id + "&sid=" + sid,
        method: "get"
      }).then(res => {
        if (res.data.code == 200) {
          this.isLoading = false;
          this.report = res.data.report;
        }
      });
    },
    //选择优惠方式
    handle() {
      var preferential = this.preferential_way;
      console.log(preferential)
      if (preferential == "1") {
        //使用积分
        this.saleprice = 0;
        this.totalprice = this.totalprices;
        this.leftintegral = this.totalintegral;
        this.integral = "";
      } else {
        //使用优惠卷
        this.saleprice = 0;
      }
    },
    //选择优惠卷
    selectcoupon() {
      console.log(this.coupon);
      for (let i of this.mycoupon) {
        if (i.code == this.coupon) {
          this.saleprice = parseFloat(i.money);
        }
      }
    },
    //获取课程价格
    showPrice() {
      var params = {
        course_id: this.course_id,
        user_id: this.user_id
      };
      showprice(params).then(res => {
        var coursePirce = res.prices;
        this.totalprice = parseFloat(res.myprice);
        this.totalprices = parseFloat(res.myprice);
        for (let i of coursePirce) {
          if (i.type == 0) {
            this.coursePirce.yuanjia = i.discount_price;
          } else if (i.type == 1) {
            this.coursePirce.pujia = i.discount_price;
          } else {
            this.coursePirce.gaojia = i.discount_price;
          }
        }
      });
    },
    //获取积分
    getUserinfo() {
      var params = {
        user_id: this.user_id
      };
      getuserinfo(params).then(res => {
        this.totalintegral = parseInt(res.users.integral);
        console.log("初始积分", this.totalintegral);
        this.leftintegral = this.totalintegral;
        console.log("剩余积分", this.leftintegral);
      });
    },
    showrule() {
      var params = {};
      showRule(params).then(res => {
        if (res.data.code == 200) {
          this.ratio = res.data.ratio;
        }
      });
    },
    //获取课程详情信息
    get_course_detail() {
      var id = this.$route.query.id;
      this.course_id = this.$route.query.id;
      console.log(id);
      this.axios({
        url: "/api/get_course_detail/?id=" + id
      }).then(res => {
        if (res.data.code == 200) {
          this.isLoading = false;
          this.course = res.data.course;
          this.tag = res.data.tag;
          this.teacher = res.data.teacher;
          this.course_num = res.data.course_num;
          this.sections = res.data.sections;
          this.showFocus();
        }
      });
    },
    //验证用户输入积分的范围
    checkintegral() {
      if (this.integral == "") {
        // alert(1)
        this.saleprice = 0;

        this.totalprice = this.totalprices;
        this.leftintegral = this.totalintegral;
      } else if (parseInt(this.integral) > parseInt(this.totalintegral)) {
        alert("积分不能大于拥有的积分");
        this.integral = this.totalintegral;
        this.coupon = this.integral;
        this.saleprice = parseFloat(this.integral * this.ratio).toFixed(2);
        this.leftintegral =
          parseInt(this.totalintegral) - parseInt(this.integral);
      } else {
        this.saleprice = parseFloat(this.integral * this.ratio).toFixed(2);
        this.coupon = this.integral;

        // this.saleprice = parseFloat(this.integral * this.ratio);
        this.leftintegral =
          parseInt(this.totalintegral) - parseInt(this.integral);
      }
    },

    //立即购买
    buynow() {
      var user_id = localStorage.getItem("user_id");
      if (user_id) {
        this.getcoupon();
        this.getUserinfo();
        this.showPrice();
        $("#vip-modal").modal("show");
      } else {
        $("#sign-modal").modal("show");
      }
    },
    //购买课程
    buycourse() {
      var params = {
        preferential_way: this.preferential_way,
        uid: this.user_id,
        cid: this.course.id,
        coupon: this.coupon,
        pay_type: 0
      };
      buyCllass(params).then(res => {
        console.log(res);
        if (res.code == 200) {
          var params = {
            order_sn: res.order_sn
          };
          getpayurl(params).then(res => {
            window.location.href = res.path;
          });
        }
      });
    },
    //查看课程章节
    checkcourse(video, id) {
      var user_id = localStorage.getItem("user_id");
      if (user_id) {
        if (this.course.member == 54) {
          this.$router.push({
            path:
              "/section/?video=" +
              video +
              "&section_id=" +
              id +
              "&course_id=" +
              this.course_id
          });
        } else {
          //判断用户是否购买过该课程  没购买过  跳转购买 购买过直接打开课程

          console.log(this.isTrue);
          if (this.isTrue) {
            this.$router.push({
              path:
                "/section/?video=" +
                video +
                "&section_id=" +
                id +
                "&course_id=" +
                this.course_id
            });
          } else {
            $("#vip-modal").modal("show");
            this.getcoupon();
            this.getUserinfo();
            this.showPrice();
          }
        }
      } else {
        $("#sign-modal").modal("show");
      }
    },
    showFocus() {
      var teacher_id = this.teacher.id,
        user_id = this.user_id;

      this.axios({
        url: "/api/showFocus/?user_id=" + user_id + "&teacher_id=" + teacher_id
        // method:'get',
        // data:params
      }).then(res => {
        if (res.data.code == 200) {
          this.focus = 0;
        } else {
          this.focus = 1;
        }
      });
    },
    showcollect() {
      this.axios({
        url:
          "/api/showcollect/?user_id=" +
          this.user_id +
          "&course_id=" +
          this.course_id
      }).then(res => {
        if (res.data.code == 200) {
          this.cfocus = 0;
        } else {
          this.cfocus = 1;
        }
      });
    }
  }
};
</script>


<style scoped>
.strong {
  color: green;
}
.btn-danger {
  color: #fff;
  background-color: #f66;
  border-color: #f66;
}
.btn[data-v-b530ced8] {
  margin-bottom: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.full-width {
  width: 100%;
}

.owner-list-left {
  color: #0c9;
  font-size: 16px;
  text-align: left;
}
.sidebox-titles {
  float: right;
}
.ddd {
  background: rgb(179, 28, 28);
}
</style>


